<!-- 设置IP规则新增 -->
<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"
  id="ipAdd" [ngClass]="{'guide-true': !server.institutionMolde}">
  <div class="modal-dialog modal-lg institution-modal institution-modal-ip" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> -->
        <h4 class="modal-title" id="myModalLabel">IP规则管理 — 新增</h4>
      </div>
      <div class="popup-body modal-body">
        <form #FormAdd="ngForm">
          <div class="form-group">
            <label class="col-xs-12 col-sm-2 control-label text-right">所属机构：</label>
            <div class="col-xs-12 col-sm-10">
              <p *ngIf="institutiondate">{{institutiondate.institutionName}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-12 col-sm-2 control-label text-right" for="dhName">IP规则名称:</label>
            <div class="col-xs-12 col-sm-10">
              <input type="text" name="ruleName" class="form-control" autocomplete="off" #ruleName=ngModel [(ngModel)]="adddate.ruleName"
                required>
              <label class="red required">*</label>
              <div *ngIf="ruleName.invalid && (ruleName.touched)" class="error-alert">
                <div *ngIf="ruleName.errors.required">
                  <small class="error">请输入机构名称</small>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group height-auto">
            <label class="col-xs-12 col-sm-2 control-label text-right" for="dhName">优先级:</label>
            <div class="one-line col-xs-12 col-sm-4">
              <select name="sortIndex" required [(ngModel)]="adddate.sortIndex">
                <option id="" value="">请选择</option>
                <option id="" value="0">高</option>
                <option id="" value="1">中</option>
                <option id="" value="2">低</option>
              </select>
            </div>

            <label class="one-line col-xs-12 col-sm-2 control-label text-right" for="dhName">规则模式:</label>
            <div class="col-xs-12 col-sm-4">
              <!-- <select name="ruleMode" required [(ngModel)]="adddate.ruleMode">
                <option id="" value="">请选择</option>
                <option id="" value="0">禁止</option>
                <option id="" value="1">允许</option>
              </select> -->
              <label class="toggle toggle-positive">
                <input type="checkbox" name="ruleMode" #ruleMode=ngModel [(ngModel)]="adddate.ruleMode" >
                <div class="track">
                    <div class="tit" *ngIf="adddate.ruleMode">允许</div>
                    <div class="tit right" *ngIf="!adddate.ruleMode">禁止</div>
                    <div class="handle"></div>
                </div>
              </label>
            </div>
          </div>

          <div class="form-group height-auto">
            <label class="col-xs-12 col-sm-2 control-label text-right" for="dhName">是否启用:</label>
            <div class="col-xs-12 col-sm-10">
              <!-- <select name="enabled" required [(ngModel)]="adddate.enabled">
                <option id="" value="">请选择</option>
                <option id="" value="0">禁用</option>
                <option id="" value="1">启用</option>
              </select> -->
              <label class="toggle toggle-positive">
                <input type="checkbox" name="enabled" #enabled=ngModel [(ngModel)]="adddate.enabled" >
                <div class="track">
                    <div class="tit" *ngIf="adddate.enabled">允许</div>
                    <div class="tit right" *ngIf="!adddate.enabled">禁止</div>
                    <div class="handle"></div>
                </div>
              </label>
            </div>
          </div>

          <div class="form-group height-auto">
            <label class="col-xs-12 col-sm-2 control-label text-right">IP表达式:</label>
            <div class="col-xs-12 col-sm-10">
              <textarea rows="5" type="text" name="expression" class="form-control" [(ngModel)]="adddate.expression">                                    </textarea>
            </div>
          </div>

        </form>

        <div class="ip-page col-sm-12">
          <h5>
            <strong>IP表达式说明</strong>
          </h5>
          <p>1、xxx.xxx.xxx.xxx (一个确定的IP地址)。</p>
          <p>2、使用 '|' 隔开每个IP子表达式。</p>
          <p>3、IP段设置。 例如，'10.1' 表示所有以 '10.1.'开头的IP地址，如10.1.1.0 和 10.1.0.1 ,而不是 '10.12.1.1'。</p>
          <p>4、使用 '-' 来设置一个IP范围。例如, '222.111-222.113'，比如包括 222.111.0.1,222.112.0.2, ...,222.113.0.254。</p>
          <p>5、使用 '!'来排除IP地址。例如，'!222.111-222.113'，比如不包括 222.111.0.1,222.112.0.2, ...,222.113.0.254。</p>
          <p>6、使用 '*' 来包含所有的IP地址。</p>
          <p>7、使用 '!*' 来排除所有的IP地址。</p>
          <p>8、'xxx.xxx' 等同于 'xxx.xxx.' 等同于 'xxx.xxx.*'</p>
        </div>

      </div>
      <div class="popup-footer modal-footer">
        <button type="button" class="btn btn-primary" [disabled]="FormAdd.invalid" (click)="submitAdd(1)"><span class="glyphicon glyphicon-plus"></span> 新增</button>
      </div>
    </div>
  </div>
</div>
<!-- 设置IP规则新增 END -->